<template>
<!-- 商品详情 -->
  <div class="spxq">
      <backzj :mssg='aaa'/>
      <div class="ttop">
          <!-- 商品轮播 -->
          <div class="banner">
                <mt-swipe class="abnnimg" height="200px">
                    <Swiper>
                    <Slide v-for="(item,index) in goodsinfo" :key="index">
                    <img :src="item" alt="">
                  </Slide>
          </Swiper>
                </mt-swipe>
          </div>
          <!-- 商品详情 -->
          <div class="xqmian">
              <div class="bianhao">团号：{{this.$route.params.gid}}</div>
              <div class="jiage">
                  <div class="ptjia">
                      <p>拼团价<span class="jjfe">￥{{msg.spellprice}}</span></p>
                      <p class="ktprice">单品价￥{{msg.price}}</p>
                  </div>
                  <div class="ptjia">
                      <p>邀请好友拼团</p>
                      <img :src="SMDataURL+'/images/pppfenxiang.png'" class="fximg"></img>
                  </div>
              </div>
              <div class="productName">{{msg.productName}}</div>
              <div class="jirt">
                  <p>{{msg.totalNum}}人团</p>
                  <p>第{{msg.periods}}期</p>
                  <p>拼团红包<span class="cengse">￥{{msg.couponMoney+msg.secend_couponMoney}}</span></p>
              </div>
              <div class="jirt">
                  <p>红包首次提现<span class="cengse">{{msg.couponMoney}}</span>元</p>
                  <p>余数<span class="cengse">5</span> 约14天</p>
              </div>
              <div class="asdf">
                  <div class="jirt xhxian">
                  <p>{{msg.successNum}}人拼中商品</p>
                  <p>得商品机会<span class="cengse">{{msg.successNum|dataFormat(msg.totalNum)}}%</span></p>
                    </div>
                    <div class="jirt">
                        <p>{{msg.totalNum - msg.successNum}}人得红包退拼团费</p>
                        <p>得红包机会<span class="cengse">{{msg.successNum|dataFormat2(msg.totalNum)}}%</span></p>
                    </div>
              </div>
              <div class="ksdfa">
                  <div class="jirt xhxian">
                    <p >{{msg.cnt==null?"0": msg.cnt}}人正在拼团   {{msg.totalNum>msg.cnt?'还差'+(msg.totalNum-msg.cnt)+'人':'已拼满'}}</p>
                    <div class="ptjia ckanf">
                        <p>查看拼团成员</p>
                        <img :src="SMDataURL+'/images/amy-demtdusk.png'" class="fximg1"></img>
                    </div>
                  </div>
                  <div class="tximg">
                      <div class="tttimg" v-for="(item,index) in cnt" :key="index">
                          <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
                      </div>
                  </div>
              </div>
              <div class="jiezhi">{{msg.endDate!='' && msg.pstatus==0?'拼团截止日期:'+msg.endDate:''}}</div>
              <div class="dbox">
                  <div class="dbleft">
                      <div class="lleft">
                          <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
                      </div>
                      <div class="rright">
                          <div class="rrtop">
                              <div class="rrtop1">来回顺打卡记录发还是断开连接粉红色的科技类发货数量款到发货</div>
                          </div>
                          <div class="xiangqyc">科技撒给对方就开始的股份收到货升降开关号发的给对方就开始的股份收到货升给对方就开始的股份收到货升</div>
                      </div>
                  </div>
                  <div class="dbright1">
                      <div class="sdhfl">
                          <span>拼团累计</span>
                          <span>99</span>
                      </div>
                      <div class="dbright">进入店铺</div>
                  </div>
              </div>
              <div class="sdgs" @click="ptgze">
                  <p>拼团规则</p>
                  <img :src="SMDataURL+'/images/prodetail-js.png'" class="gzeimg"></img>
              </div>
              <div class="liucimg">
                  <img :src="SMDataURL+'/images/ptliucc2.png'"></img>
              </div>
              <div class="spxqa">商品详情</div>
              <div class="xqimg">
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
                  </div>
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/xqbann-0.jpg'"></img>
                  </div>
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/xqbann-1.jpg'"></img>
                  </div>
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/xqbann-2.jpg'"></img>
                  </div>
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/xqbann-3.jpg'"></img>
                  </div>
                  <div class="iaiamg">
                      <img :src="SMDataURL+'/images/xqbann-4.jpg'"></img>
                  </div>
              </div>
          </div>
      </div>
      <div class="footer">
          <div class="skdfp">
              <img :src="SMDataURL+'/images/xqyecs-2.png'"></img>
              <span>收藏</span>
          </div>
          <div class="skdfp">
              <img :src="SMDataURL+'/images/prodetail-kf.png'"></img>
              <span>客服</span>
          </div>
          <div class="skdfp">
              <img :src="SMDataURL+'/images/prodetail-syq.png'"></img>
              <span>上一期</span>
          </div>
          <div class="jiagea" @click="zhifu">参与拼团（省999.99）元</div>
      </div>
      <!-- 拼团规则弹框 -->
      <div :class="afgsd?'commoditydetail1':'commoditydetail'">
          <div class="commod-z">
              <div class="commd-title">拼团规则</div>
              <div class="commd-font">
                  1.<span class="jaicu">拼中商品者发货，拼不中者退拼团费并发红包鼓励:</span>当拼团人满时，平台随机确定拼中商品的拼团者,并在预定的时间内发货。
                  <p>平台向没有拼中商品的拼团者2个工作日内退回拼团费并发放红包鼓励，希望下次再拼。</p>
              </div>
              <div class="commd-font">
                  2.<span class="jaicu">价格优惠:</span>平台努力作到所售同品牌、同规格的商品同其它平台相比，拼团价格具有一定优势或基本一致，但无法保证所有商品价格为全网最低价,务请消费者在拼团前要对商品性能和价格综合考虑清楚后再参加拼团，拼中商品后不得以商品价格等为由退单。
              </div>
              <div class="commd-font">
                  3.<span class="jaicu">红包发放与提现:</span>拼团红包在满团开团后立即发放，可在“我的红包-拼团红包”里查看。但为了防止发放红包后因退货而导致平台亏损，拼团总红包超过30元时，红包将会分成两部分提现。第一部分金额较小可以立即提现；第二部分需要等本团最后一位收货者过了7天退货期(约为拼团结束后14天)后才能最后确定拼团红包金额。
                  <p>如果有人退货，会使未拼中者的红包金额按退货数量增加而降低，比如原拼团红包为9元，3人拼中商品，
        如有1人退货，拼团红包降为原来的2/3即6元;如有2人退货，拼团红包降为原来的1/3即3元;如有3人退货，红包降为0元，余类推。</p>
              </div>
              <div class="commd-font">
                  4.<span class="jaicu">发货延迟:</span>按商品发货时间，如平时如延迟时间未超过2日，双11、春节、疫情、天灾等因特殊原因,造成不能准时发货的，拼中商品者均不能退单。
              </div>
              <div class="commd-font">
                  5.<span class="jaicu">退货:</span>因商业模式原因，本商城售出商品一律不退，如有产品质量问题，商家只负责换货或维修。请参与拼团者在拼团之前务请考虑清楚再拼。在本商城拼团购物需要接受本条款，如不接受者请不要在本商城拼团购物。
              </div>
              <div class="commd-font">
                  6.<span class="jaicu">拼团解散:</span>在予定的拼团时间内人数不够、缺货、或其它突发性情况发生，导致拼团不成功时，平台有权中止或解散拼团，用户付的拼团款将于1-2个工作日内退回到您的付款账户中。
              </div>
              <div class="commd-font">
                  7.<span class="jaicu">黑名单:</span>平台对于恶意退货或其它破坏拼团规则故意碰瓷等着予以公布，并计入黑名单。
              </div>
              <div class="commd-font">
                  8.<span class="jaicu">未成年人:</span>需在家长陪护知道下参加本平台的拼团。
              </div>
              <div class="commd-font">
                  9.<span class="jaicu">建议:</span>对本平台商品有需求的用户可以多多参与拼团，并增添购物乐趣。对本平台商品没有真实需求的用户，不建议参加本平台的拼团购物，以免给您带来浪费和烦恼。
              </div>
              <div class="commd-font">
                  10.9.本商城解释权归深圳市天天上网络科技有限公司所有;
      如您对此活动或对本公司有任何意见或建议,
      欢迎致电:0755-8277-9639
              </div>
              <div class="sdgas" @click="guize">好的</div>
          </div>
      </div>
      <!-- 支付底部划出 -->
      <div class="zfhc" :class="{asdv:dsd}">
          <div class="ksd">
              <div class="xqing">
                  <img :src="guige"></img>
              </div>
              <div class="sdaf">
                  <p class="jjfe">￥{{dj}}</p>
                  <p class="adod">商品规格</p>
              </div>
          </div>
          <div class="shdk">
              <div class="dgfs" :class="{dsfa:key==index}" v-for="(item,index) in arr1" :key='index' :data-set='index' @click="xunagg">{{item.name}}</div>
          </div>
          <p>商品数量</p>
          <div class="shul">
              <div class="jdfa" @click="jian">
                  <p></p>
              </div>
              <div class="jdfa1">{{num}}</div>
              <div class="jdfa2" @click="jia">
                  <p class="ksah"></p>
                  <p class="ksah1"></p>
              </div>
          </div>
          <div class="zongji">总计：<span class="jjfe">￥{{num|sumres(dj)}}</span></div>
          <div class="queding" @click="toddxq">确定</div>
      </div>
      <!-- 遮罩层 -->
      <div class="zhezhao" v-if="afgsd || dsd" @click="guize"></div>
      <div class="toast" v-show="toastShow">
  {{toastText}}
</div>
  </div>

  
</template>

<script>
import backzj from "../components/backzj.vue";
import { getgoodinfo, getgoodinfo2, addorder } from "../api/spell";
import { Swiper, Slide } from "vue-swiper-component";
import MD5JS from '../utils/md5.js';
export default {
  components: { backzj },
  data() {
    return {
      toastShow: false,
      toastText: "",

      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      aaa: "商品详情",
      arr: [1, 1, 1, 1, 1, 1, 1],
      afgsd: false,
      dsd: false,
      arr1: [],
      key: 0,
      goodsinfo: [],
      msg: "",
      cnt: 0,
      guige: "",
      dj: "",
      num: 1,
      info2: "",
      orderInfo: "",
    };
  },
  filters: {
    dataFormat(successNum, totalNum) {
      let a = (successNum / totalNum) * 100;
      return parseFloat(a.toFixed(2));
    },
    dataFormat2(successNum, totalNum) {
      let a = (successNum / totalNum) * 100;
      return 100 - parseFloat(a.toFixed(2));
    },
    sumres(num, dj) {
      let a = num * dj * 1;
      return parseFloat(a.toFixed(2));
    },
  },
  components: {
    Swiper,
    Slide,
  },
  methods: {
    //Toast
    toast(str) {
      let v = this;
      v.toastText = str;
      v.toastShow = true;
      setTimeout(function () {
        v.toastShow = false;
      }, 1500);
    },
    ptgze() {
      this.afgsd = true;
    },
    zhifu() {
      this.dsd = true;
    },
    guize() {
      (this.afgsd = false), (this.dsd = false);
    },
    //切换规格
    xunagg(e) {
      this.key = e.target.dataset.set;
      this.arr1.forEach((item) => {
        if (item.name == e.target.firstChild.data) {
          console.log(item.image);
          this.guige = item.image;
          this.dj = item.price;
        }
      });

      // console.log(e.target.firstChild.data)
    },

    jian() {
      if (this.num <= 1) {
        return false;
      } else {
        this.num--;
      }
    },
    jia() {
      if (this.num >= this.msg.totalNum - this.msg.cnt) {
        this.toast("最多只能购买" + (this.msg.totalNum - this.msg.cnt) + "件");
      } else {
        this.num++;
      }
    },
    toddxq() {
      //创建订单
      let shuju = [
        {
          linkNo: 11,
          amount: this.dj,
          companyId: this.msg.companyId,
          userId: 7165,
          shareuserId: 0,
          mobile: "18620374646",
          deliveryId: 0,
          deliveryflag: 1,
         sign:MD5JS.hexMD5("11"+this.dj+this.msg.companyId+"7165"+"18620374646"),
          detail: [
            {
              product_id: this.msg.productId,
              detail_id: this.info2.id,
              lbl_ids: "",
              periods: this.msg.sid ? "0" : this.msg.sid,
              number: this.num,
              price: this.dj,
              amount: this.dj * this.num,
            },
          ],
          oug_trade_no: "",
          openid: "",
        },
      ];
      addorder({ data: JSON.stringify(shuju)}).then((res) => {
        console.log("创建订单的返回值", res.data);
        this.orderInfo = res.data;
        this.$router.push({
          name: "toddxq",
          params: {
            info: this.orderInfo,
          },
        });
      });
    },
  },

  created() {
    // console.log("来的路由参数", this.$route.params);
    this.$store.dispatch("toggleAPIURL", process.env.NODE_ENV);
    getgoodinfo({
      pid: this.$route.params.info.id,
    }).then((res) => {
      console.log("商品详情", res.data);
      this.info2 = res.data[0];
      this.guige = res.data[0].photos;
      this.dj = res.data[0].spellprice;
      res.data.forEach((item) => {
        this.arr1.push({
          name: item.attributeOne,
          image: item.photos,
          price: item.spellprice,
        });
      });
    });
    getgoodinfo2({
      pid: this.$route.params.info.id,
      num: this.$route.params.info.totalNum,
      type: this.$route.params.info.type,
      companyId: this.$route.params.info.companyId,
      suId: this.$route.params.info.sid,
      mbfg: this.$route.params.info.pmbfg,
    }).then((res) => {
      console.log("商品详情11111", res);
      this.goodsinfo = res.data[0].photos.split(",");
      this.msg = res.data[0];
      this.cnt = res.data[0].cnt;
    });
  },
};
</script>

<style scoped>
.spxq {
  background: #f6f6f6;
}
.ttop {
  width: 100%;
  height: calc(100vh - 48px);
  overflow-y: auto;
  margin-top: 40px;
}
.abnnimg {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: white;
}
.lbtu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.abnnimg img {
  max-width: 100%;
  max-height: 190px;
}
.xqmian {
  width: 94%;
  margin: 0 auto;
}
.xqmian > div {
  margin: 4px 0;
}
.jiage {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ptjia {
  display: flex;
  align-items: center;
}
.jjfe {
  font-size: 18px;
  color: #ff1f1f;
}
.ktprice {
  text-decoration: line-through;
  margin-left: 10px;
}
.fximg {
  width: 17px;
  height: 15px;
}
.productName {
  font-size: 18px;
  width: 100%;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jirt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.asdf {
  background: white;
  border-radius: 4px;
}
.cengse {
  color: #f07244;
  font-size: 18px;
}
.xhxian {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(220, 220, 220, 0.7);
}
.fximg1 {
  width: 18px;
  height: 18px;
}
.ckanf {
  color: #999999;
}
.ksdfa {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 4px;
}
.tximg {
  display: flex;
  align-items: center;
}
.tttimg {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
}
.tttimg img {
  max-width: 100%;
  max-height: 100%;
}
.dbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-radius: 4px;
  margin-top: 10px;
}
.dbleft {
  width: 78%;
  display: flex;
  align-items: center;
}
.lleft {
  width: 90px;
  height: 75px;
  flex-shrink: 0;
  margin-right: 5px;
}
.lleft img {
  width: 100%;
  height: 100%;
}
.rright {
  width: 65%;
  display: flex;
  flex-direction: column;
}
.rrtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0;
}
.rrtop1 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xiangqyc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.dbright1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.sdhfl {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dbright {
  background: #428beba1;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 6px 0;
  color: white;
}
.sdgs {
  display: flex;
}
.gzeimg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}
.liucimg {
  width: 100%;
  height: 150px;
}
.liucimg img {
  max-width: 100%;
  max-height: 100%;
}
.xqimg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: white;
}
.iaiamg {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iaiamg img {
  max-width: 100%;
  max-height: 100%;
}
/* 底部导航 */
.footer {
  width: 100%;
  height: 48px;
  background: #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skdfp {
  width: 12%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
}
.skdfp img {
  width: 18px;
  height: 20px;
}
.jiagea {
  width: 50%;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: linear-gradient(0deg, #ff1f1f 0%, #ff592d 100%);
  color: white;
  font-size: 14px;
  border-radius: 20px;
}
/* 规则弹框 */
.zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.commoditydetail {
  position: fixed;
  z-index: 200;
  height: 98%;
  width: 100%;
  bottom: -1000px;
  background: white;
  transition: bottom 0.5s;
  border-radius: 8px 8px 0 0;
}
.commoditydetail1 {
  position: fixed;
  z-index: 200;
  height: 80%;
  width: 100%;
  bottom: 0;
  background: white;
  transition: bottom 0.5s;
  border-radius: 8px 8px 0 0;
}
.commod-z {
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.commd-title {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  color: #333333;
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
.commd-font {
  font-size: 14px;
  color: #666666;
}
.jaicu {
  font-weight: 700;
}
.sdgas {
  width: 50%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #428ceb;
  color: white;
  font-size: 18px;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 20px;
}
/* 规则弹框 */
/* 支付底部划出 */
.zfhc {
  position: fixed;
  left: 0;
  bottom: -1000px;
  width: 100%;
  background: white;
  z-index: 200;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
  padding: 5px 10px;
  transition: bottom 0.5s;
}
.asdv {
  bottom: 0;
}
.ksd {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}
.xqing {
  width: 45px;
  height: 45px;
  margin-right: 4px;
}
.xqing img {
  max-height: 100%;
  max-width: 100%;
}
.sdaf {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.adod {
  color: #333;
}
.shdk {
  display: flex;
  align-items: center;
  margin: 6px 0;
}
.dgfs {
  margin-right: 8px;
  padding: 1px 10px;
  color: #ccc;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.dsfa {
  margin-right: 8px;
  padding: 1px 10px;
  border: 1px solid #297ce8;
  color: #297ce8;
  border-radius: 4px;
}
.shul {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  border-radius: 8px;
}
.jdfa {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  border-radius: 8px 0 0 8px;
}
.jdfa p {
  width: 18px;
  border-bottom: 2px solid #333;
}
.jdfa1 {
  width: 44px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
}
.jdfa2 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  border-radius: 0 8px 8px 0;
}
.ksah {
  position: absolute;
  width: 18px;
  border-bottom: 2px solid #333;
}
.ksah1 {
  position: absolute;
  width: 18px;
  border-bottom: 2px solid #333;
  transform: rotate(90deg);
}
.queding {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background: #ff1f1f;
  border-radius: 4px;
  margin: 20px auto;
  font-size: 18px;
}
.swipe-items-wrap {
  height: 100% !important;
}

.wh_slide {
  display: flex;
  justify-content: center;
}
.toast {
  position: fixed;
  z-index: 2000;
  left: 50%;
  top: 45%;
  transition: all 0.5s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: rgba(17, 17, 17, 0.7);
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  max-width: 150px;
}
/* 支付底部划出 */
</style>